今天是第十五天,不知道是不是因為確診越來越不舒服的關係,
我感到前所未有的絕望,覺得自己離放棄近在咫尺。
但我還是打開了這個頁面,要來談談Hook,談談useEffect
,
然後打開文件看到第一句我的心態就炸裂了。
Effect Hook 讓你可以使用 function component 中的 side effect:
這是一段乍看之下每個字我都看得懂,但何在一起我卻完全不知道在說什麼的話。
好,回到最初的起點,先來看一下什麼是function component
。
這個是function component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
文件是這麼說的:
它接受一個「props」物件並回傳一個 React element。我們稱之為 function component,因為它本身就是一個 JavaScript function。
這個是Class Component
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
雖然還搞不太清楚這兩個之間的具體差別是什麼,但總之我們知道,如果要用hook,我們要選用上面那種function component
來建立我的組件。
那,side effect
又是甚麼??我只知道我本人現在吃藥的副作用有頭暈口乾^^
文件是這麼說的
資料 fetch、設定 subscription、或手動改變 React component 中的 DOM 都是 side effect 的範例。
React component 有兩種常見的 side effect:一種不需要執行清除,另一種則需要。
好,應該不是只有我看不懂。
於是我去求助維基百科,維基百科是這麼說的
In computer science, an operation, function or expression is said to have a side effect if it modifies some state variable value(s) outside its local environment, which is to say if it has any observable effect other than its primary effect of returning a value to the invoker of the operation.
粗淺的理解,大概就是如果這個function,修改了function之外的值,或是做了與function無關的事情就是一種副作用。
像是console.log
改變了主控台的輸出,也是一種副作用。
其他還有一些常見的副作用們:
那麼,React為什麼需要專門有一個hook來處理這件事情?
因為,透過useEffect
,我們可以跟外部的世界進行互動,但不影響component自己的渲染。
那些需要跟外部互動的副作用,就交給useEffect
來處理。
寫到這裡,好像懂了點什麼,總之,就是為了避免一些副作用(我以前甚至不知道程式有副作用),所以我們用useEffect
來處理會產生副作用的事物。
去了半條老命我終於看懂(也可能其實沒懂)了文件的第一句話了,真是世界和平嗚嗚。
那麼,我們明天,還會見的!
參考資料
https://ithelp.ithome.com.tw/articles/10185780
https://zh.wikipedia.org/zh-tw/%E5%89%AF%E4%BD%9C%E7%94%A8_(%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6)
https://ithelp.ithome.com.tw/articles/10224270
https://www.freecodecamp.org/news/react-useeffect-absolute-beginners/